---
title: Documentation
layout: docs
permalink: /docs/home.html
description: "Getting started with TypeScript"
---

<h1>Start Learning</h1>

<div class="flow-links">
    <a href="/docs/handbook/typescript-in-5-minutes.html" class="clicky-button headline">
      <p>5 minute overview of the language</p>
      <h4>TS in 5m</h4>
    </a>

  <a href="/docs/handbook/basic-types.html" class="clicky-button headline">
    <p>The TypeScript language reference</p>
    <h4>Handbook</h4>
  </a>

  <a href="/samples/index.html" class="clicky-button headline">
    <p>Guides from the TS team </p>
    <h4>Samples</h4>
  </a>

  <a href="/play/index.html?#show-examples" class="clicky-button headline">
    <p>Comprehensive hands-on playground tutorials</p>
    <h4>Examples</h4>
  </a>
</div>

<h1>Start a Project</h1>
<p>Because TypeScript is a superset of JavaScript, it doesn't have a default template -  there would be too many.
Instead, other projects have their own TypeScript bootstrap templates with their own context. These projects provide
templates which include TypeScript support.
</p>
<p>&nbsp;</p>

<!--
  Want to consider adding a new one? The project should probably be getting
  ~ >10k npm downloads a week or really raise the bar for the platform.

  API:
  - Feathers JS
  - graphql-yoga
  - WeChat
  - TS node starter
  - nest

  Web:
    Angular
    Vue
    Nuxt.js
    Rails
    Dojo

  React:
    - Create React App
    - Gatsby
    - Next JS

  NPM Library:
  - TSDX
  - CLI - oclif

  Tools:
   - Babel
   - Parcel
   - Webpack
   - Rollup

  Building apps:
   -  Electron
   -  React Native
   -  NativeScript

 -->

<h2>Node with NPM</h2>
<div class="flow-links">
  <a href="https://github.com/jaredpalmer/tsdx#readme" class="clicky-button">
    <p>Zero config tool for building TypeScript libraries</p>
    <h4>TSDX</h4>
  </a>
  <a href="https://oclif.io" class="clicky-button">
    <p>Create command line tools your users love</p>
    <h4>oclif</h4>
  </a>
  <a href="https://github.com/infinitered/gluegun#readme" class="clicky-button">
    <p>A delightful toolkit for building TypeScript-powered command-line apps</p>
    <h4>Gluegun</h4>
  </a>
</div>

<h2>Web Frameworks</h2>
<div class="flow-links">
  <a href="https://angular.io/" class="clicky-button">
    <p>Makes writing beautiful apps be joyful and fun</p>
    <h4>Angular</h4>
  </a>

  <a href="https://reactjs.org" class="clicky-button">
    <div class="badge">Examples below</div>
    <p>A JavaScript library for building user interfaces</p>
    <h4>React</h4>
  </a>

  <a href="https://vuejs.org" class="clicky-button">
    <p>The Progressive JavaScript Framework</p>
    <h4>Vue</h4>
  </a>

  <a href="https://github.com/rails/webpacker/blob/master/docs/typescript.md" class="clicky-button">
    <div class="badge">Plugin</div>
    <p>Convention over configuration web framework</p>
    <h4>Ruby on Rails</h4>
  </a>

  <a href="https://www.typescriptlang.org/docs/handbook/asp-net-core.html" class="clicky-button">
    <div class="badge">Guide</div>
    <p>Framework for building modern, cloud-based, Internet-connected applications</p>
    <h4>ASP.NET Core</h4>
  </a>
</div>

<h2>Node APIs</h2>
<div class="flow-links">
  <a href="https://code.visualstudio.com/tutorials/functions-extension/getting-started" class="clicky-button">
    <p>Build and deploy from VS Code in minutes</p>
    <h4>Azure Functions</h4>
  </a>

  <a href="https://feathersjs.com" class="clicky-button">
    <p>A framework for real-time applications and REST APIs</p>
    <h4>Feathers JS</h4>
  </a>

  <a href="https://github.com/graphql-boilerplates/typescript-graphql-server" class="clicky-button">
    <p>Bootstrap your GraphQL server within seconds</p>
    <h4>GraphQL</h4>
  </a>

  <a href="https://nestjs.com" class="clicky-button">
    <p>A progressive Node.js framework for building efficient and scalable server-side applications</p>
    <h4>Nest JS</h4>
  </a>

  <a href="https://github.com/Microsoft/TypeScript-Node-Starter" class="clicky-button">
    <p>A documented starter template from the TS team</p>
    <h4>Node Starter</h4>
  </a>

  <a href="https://github.com/microsoft/TypeScript-WeChat-Starter/blob/master/README.md" class="clicky-button">
    <div class="badge">Guide</div>
    <p>Use the WeChat JSSDK with TypeScript</p>
    <h4>WeChat</h4>
  </a>
</div>

<h2>React Projects</h2>

<div class="flow-links">
  <a href="https://create-react-app.dev" class="clicky-button">
    <p>Set up a modern web app by running one command</p>
    <h4>Create React App</h4>
  </a>

  <a href="https://www.gatsbyjs.org" class="clicky-button">
    <div class="badge">Plugin</div>
    <p>Helps developers build blazing fast websites and apps</p>
    <h4>Gatsby</h4>
  </a>

  <a href="https://nextjs.org" class="clicky-button">
    <p>The React Framework</p>
    <h4>Next.js</h4>
  </a>

  <a href="https://github.com/jaredpalmer/razzle" class="clicky-button">
    <p>Server-rendered universal JavaScript applications with no configuration</p>
    <h4>Razzle</h4>
  </a>

  <a href="https://reactjs.org/community/starter-kits.html" class="clicky-button">
    <p>Recommendations from the React Team</p>
    <h4>Starter Kits</h4>
  </a>
</div>

<h2>Building Apps</h2>

<div class="flow-links">
  <a href="https://electronjs.org" class="clicky-button">
    <div class="badge">Plugin</div>
    <p>Set up a modern web app by running one command</p>
    <h4>Electron</h4>
  </a>

  <a href="https://expo.io/" class="clicky-button">
    <p>The fastest way to build an app</p>
    <h4>Expo</h4>
  </a>

  <a href="https://facebook.github.io/react-native/" class="clicky-button">
    <p>Learn once, write anywhere</p>
    <h4>React Native</h4>
  </a>

  <a href="https://www.nativescript.org/" class="clicky-button">
    <p>Open source framework for building truly native mobile apps</p>
    <h4>NativeScript</h4>
  </a>

  <a href="https://www.microsoft.com/en-us/makecode/" class="clicky-button">
    <p>Brings computer science to life for all students with fun projects</p>
    <h4>MakeCode</h4>
  </a>

</div>

<h2>Tooling</h2>

<div class="flow-links">
  <a href="https://babeljs.io/docs/en/babel-preset-typescript" class="clicky-button">
    <div class="badge">Plugin</div>
    <p>Use next generation JavaScript, today</p>
    <h4>Babel</h4>
  </a>

  <a href="https://parceljs.org" class="clicky-button">
    <p>Blazing fast, zero configuration web application bundler</p>
    <h4>Parcel</h4>
  </a>

  <a href="https://webpack.js.org/guides/typescript/" class="clicky-button">
    <div class="badge">Plugin</div>
    <p>Bundle your assets, scripts, images and styles</p>
    <h4>Webpack</h4>
  </a>
</div>

<h1>Familiar With TypeScript already?</h1>


<div class="flow-links">
    <a href="/docs/handbook/release-notes/overview.html" class="clicky-button headline">
      <p>TypeScript Release Notes</p>
      <h4>Release Notes</h4>
    </a>

  <a href="/docs/handbook/basic-types.html" class="clicky-button headline">
    <p>The TypeScript language reference</p>
    <h4>Handbook</h4>
  </a>

  <a href="/docs/handbook/declaration-files/introduction.html" class="clicky-button headline">
    <p>Learn how to declare the shape of JS</p>
    <h4>d.ts Guide</h4>
  </a>

  <a href="/play/index.html" class="clicky-button headline">
    <p>Explore and share TypeScript online</p>
    <h4>Playground</h4>
  </a>
</div>

<p>Having trouble finding what you're looking for? <a href= "https://www.surveymonkey.com/r/SN9V7R7">Tell us</a> so we can better help you!
